<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    required: false,
    default: 'primary',
  },
  icon: {
    type: String,
    required: true,
  },
  stats: {
    type: String,
    required: true,
  },
  percentage: {
    type: String,
    required: false,
  },
  subtitle: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    required: true,
  },
})
</script>

<template>
  <VCard
    class="v-card-box-shadow"
    :color="props.color"
  >
    <div class="me-n2 v-card-icon">
      <VTooltip location="top">
        <template #activator="{ props }">
          <VIcon
            v-bind="props"
            icon="tabler-alert-circle"
            size="24"
          />
        </template>
        <span>{{ props.subtitle }}</span>
      </VTooltip>
    </div>
    <VCardText class="d-flex justify-space-between">
      <div>
        <span class="title">{{ props.title }}</span>
        <div class="d-flex align-center gap-2 my-1">
          <h6 class="text-h4">
            {{ props.stats }}
          </h6>
          <span
            v-if="props.percentage"
            :class="props.percentage > 0 ? 'text-success' : 'text-error'"
          >( {{ props.percentage > 0 ? '+' : '' }} {{ props.percentage }})</span>
        </div>
        <!-- <span class="subtitle">{{ props.subtitle }}</span> -->
      </div>

      <!--
        <VAvatar
        rounded
        variant="tonal"
        :color="props.color"
        :icon="props.icon"
        /> 
      -->
    </VCardText>
  </VCard>
</template>

<style scoped>
.v-card-box-shadow {
  /* box-shadow: none !important; */
}

.title {
  font-size: 16px;
}

.subtitle {
  font-size: 14px;
}

.v-card-icon {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-end: 24px;
}
</style>
